<template>
<h1>综合练习</h1>
  <table border="1">
    <caption>个人信息</caption>
    <tr><td>照片:</td><td><img :src="p.imgUrl" width="100"></td></tr>
    <tr><td>姓名:</td><td>{{p.name}}</td></tr>
    <tr><td>年龄:</td><td>{{p.age}}</td></tr>
    <tr><td>好友:</td>
      <td><ul><li v-for="name in p.friends">{{name}}</li></ul></td>
    </tr>
  </table>
  <input type="button" value="加载数据" @click="load()">
</template>

<script setup>
import {ref} from "vue";

const p = ref({name:"",age:"",imgUrl:"",friends:[]});
const load=()=>{
  let person = {name:"传奇哥",age:18,imgUrl:"b.jpg",friends:["刘备","关羽","张飞"]}
  //把从服务器请求到的数据赋值给响应式变量
  p.value = person;
}
</script>

<style scoped>

</style>